<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box {
           width:50px;
           height:50px;
           background-color: red;
           position: absolute;  
           top:300px; 
           left:60px;      
     }   
     .info {
        height: 2000px;
        background-color: #ccc;
     }
    </style>
</head>
<body>
    <h1>滚动测试  onscroll 事件</h1>
    <h1> 表单  onfocus, onblur, onsubmit</h1>
 
    <form name="myform" action="http://qq.com" onsubmit="return checkform()" >
        用户名<input type="text" name="stname"> <br/>
        年龄<input type="text" name="stage"><br/>
        邮箱<input type="text" name="email"><br/>
        <input type="submit" value="提交" />
    </form>

    <div class="box"></div>
    <div class="info"> 模拟内容</div>
</body>
<script>
// 网页滚动时 触发
let box =  document.querySelector('.box');
document.body.onscroll = function(){
    let h =  window.innerHeight;  //网页可视高
    let t = document.documentElement.scrollTop;
    //console.log( '距离='+ t);
    box.style.top = (t+ h/2-25) + 'px';
}

// 返回true 可以提交   false 阻止提交
function checkform(){
    alert('检查');
    let name =  document.myform.stname.value;
    let age =  document.myform.stage.value;
    let email =  document.myform.email.value;
    console.log( name,age,email);
    if(name == 0 ){
        alert('名字不合法');
        return false;
    }
    if(age==0 || isNaN(age) ){
        alert('年龄不合法');
        return false;
    }
    let at = email.indexOf('@');
    let dian = email.indexOf('.');
    if(at==-1 || dian==-1){
        alert('邮箱不合法');
        return false;
    }
    return true;
}

</script>
</html>